<template>
	<scroll-view scroll-y="true" class="main" @scrolltolower="more">
		<view class="items">
			<view class="item" v-for="item in list">
				<view class="top">
					<view class="price">
						<text class="fuhao">￥</text>
						<text>{{item.reduce}}</text>
					</view>
					<view class="name_box">
						<text class="name">满{{item.achieve}}元可用</text>
						<text  v-if="item.cname">此优惠券仅限{{item.cname}}项目使用</text>
					</view>
				</view>
				<view class="bottom">
					<view class="">有效期至 {{$u.timeFormat(item.exittime, 'yyyy.mm.dd hh:MM')}}</view>
					<view class="btn"  v-if="item.userStatus == 0" @click="accept(item.id)">立即领取</view>
					<view class="btn"  v-else @click="use">立即使用</view>
				</view>
			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
					</u-empty>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				finish: false,
				list: [],
				shop: ''
			}
		},
		onLoad(option) {
			this.shop = option.shop
			if(this.shop){
				uni.setNavigationBarTitle({
					title: '店铺优惠券'
				});
				this.getList1()
			}else{
				this.getList()
			}
		},
		methods: {
			use(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			accept(id){
				this.$api.post('/coupon', {
					type: 'accept',
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.reload()
					}
				}).catch((res) => {
				
				})
			},
			reload() {
				this.page = 1
				this.list = []
				this.finish = false
				if(this.shop){
					this.getList1()
				}else{
					this.getList()
				}
			},
			more() {
				this.page++
				if(this.shop){
					this.getList1()
				}else{
					this.getList()
				}
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/coupon', {
					page: this.page,
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
					
				})
			},
			getList1() {
				if (this.finish) {
					return
				}
				this.$api.post('/storecoupon', {
					page: this.page,
					store_id: this.shop
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F7F7FA;
}
.main{
	height: 100vh;
	overflow: hidden;
}
.items{
	.item{
		width: 686rpx;
		border-radius: 20rpx;
		background: #FBFBFE;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		.top{
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			.price{
				font-size: 80rpx;
				font-weight: 900;
				color: #E91919;
				padding-right: 50rpx;
				border-right: 1rpx solid #F2F2F2;
				.fuhao{
					font-size: 30rpx;
				}
			}
			.name_box{
				font-size: 22rpx;
				color: #8D93A5;
				display: flex;
				flex-direction: column;
				padding-left: 50rpx;
				line-height: 46rpx;
				.name{
					font-size: 30rpx;
					font-weight: 600;
					color: #1C274C;
				}
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #8D93A5;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 140rpx;
				height: 50rpx;
				background: #00CE9B;
				border-radius: 28rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
}
</style>
